<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="content">
				<view class="grid_item" v-for="(item, index) in dataList" :key="index">
					<view v-if="item.type == '0'">
						<view class="item_title">
							<view class="status_1">{{ item.state == 0 ? '可预订' : '已预订' }}</view>
							<!-- 					<view class="status_1" v-if="item.state == 0">可预订</view>
							<view class="status_0" v-if="item.state != 0">已预订</view> -->
							<u-icon
								name="more-dot-fill"
								color="#c4c4c4"
								v-if="type == 'edit'"
								@click="editItem(item)"
								size="20"
								bold
							></u-icon>
						</view>
						<view class="item_content">
							<view class="item_name">
								<view class="name_left">{{ item.box_num + '人桌' }}</view>
								<view class="name_right">可容纳{{ item.box_max }}人</view>
							</view>
							<image src="/static/image/merchant_8.png" class="item_box"></image>
							<image
								src="/static/image/status_1.png"
								class="status_image"
								v-if="item.reserve.reserve_state == '1'"
							></image>
							<image
								src="/static/image/status_2.png"
								class="status_image"
								v-if="item.reserve.reserve_state == '2'"
							></image>
							<image
								src="/static/image/status_3.png"
								class="status_image"
								v-if="item.reserve.reserve_state == '3'"
							></image>
							<image
								src="/static/image/status_6.png"
								class="status_image"
								v-if="item.reserve.reserve_state == '6'"
							></image>
							<view class="item_text">
								<u--text
									align="center"
									:text="
										language == 'zh'
											? item.box_name
											: item.box_name_copy
											? item.box_name_copy
											: item.box_name
									"
									color="rgba(214, 152, 51, 1)"
									size="14"
									lines="1"
									bold
								/>
							</view>
							<u-button
								text="去预订"
								shape="circle"
								@click="goReserve(item)"
								v-if="item.state == 0"
								:customStyle="btnStyle"
							></u-button>
							<u-button
								text="点菜"
								v-if="item.reserve.reserve_state == '2'"
								shape="circle"
								:customStyle="btn3Style"
								@click="orderDishes(item)"
							/>
							<view class="between" v-if="item.reserve.reserve_state == '1'">
								<u-button
									text="确认"
									shape="circle"
									:customStyle="btn1Style"
									@click="orderAffirm(item)"
								/>
								<u-button
									text="取消"
									shape="circle"
									:customStyle="btn2Style"
									@click="getCancel(item)"
								/>
							</view>
							<u-button
								text="去结算"
								shape="circle"
								@click="goAccount(item)"
								v-if="item.reserve.reserve_state == '3'"
								:customStyle="btnStyle"
							></u-button>
						</view>
					</view>
					<view v-if="item.type == '1'">
						<view class="item_title">
							<view class="status_1">{{ item.state == 0 ? '可预订' : '已预订' }}</view>
							<!-- 				<view class="status_0" v-if="item.state != 0">{{ item.reserve.reserve_people }}</view> -->
							<u-icon
								name="more-dot-fill"
								color="#c4c4c4"
								v-if="type == 'edit'"
								@click="editItem(item)"
								size="20"
								bold
							></u-icon>
						</view>
						<view class="item_content">
							<image src="/static/image/merchant_10.png" class="item_lobby"></image>
							<image
								src="/static/image/status_1.png"
								class="status1_image"
								v-if="item.reserve.reserve_state == '1'"
							></image>
							<image
								src="/static/image/status_2.png"
								class="status1_image"
								v-if="item.reserve.reserve_state == '2'"
							></image>
							<image
								src="/static/image/status_3.png"
								class="status1_image"
								v-if="item.reserve.reserve_state == '3'"
							></image>
							<image
								src="/static/image/status_6.png"
								class="status1_image"
								v-if="item.reserve.reserve_state == '6'"
							></image>
							<view class="item_name">
								<view class="name_left">{{ item.table_num + '号' }}桌</view>
								<view class="name_right">(可容纳{{ item.box_max }}人)</view>
							</view>
							<u-button
								text="去预订"
								shape="circle"
								@click="goReserve(item)"
								v-if="item.state == 0"
								:customStyle="btnStyle"
							></u-button>
							<u-button
								text="已预订"
								shape="circle"
								v-if="item.state == 1"
								:customStyle="btnStyle"
							></u-button>
							<u-button
								text="点菜"
								v-if="item.reserve.reserve_state == '2'"
								shape="circle"
								:customStyle="btn3Style"
								@click="orderDishes(item)"
							/>
							<view class="between" v-if="item.reserve.reserve_state == '1'">
								<u-button
									text="确认"
									shape="circle"
									:customStyle="btn1Style"
									@click="orderAffirm(item)"
								/>
								<u-button
									text="取消"
									shape="circle"
									:customStyle="btn2Style"
									@click="getCancel(item)"
								/>
							</view>
							<u-button
								text="去结算"
								shape="circle"
								@click="goAccount(item)"
								v-if="item.reserve.reserve_state == '3'"
								:customStyle="btnStyle"
							></u-button>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			dataList: [],
			btnStyle: {
				background: 'linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%)',
				width: '100px',
				height: '30px',
				color: '#fff',
				border: 'none',
				margin: '0px auto'
			},
			btn2Style: {
				background: 'linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%)',
				width: '65px',
				height: '35px',
				color: '#fff',
				border: 'none',
				margin: '0px'
			},
			btn1Style: {
				background:
					'linear-gradient(90deg, rgba(255, 108, 3, 1) 0%, rgba(255, 109, 5, 1) 5.5%, rgba(255, 132, 31, 1) 100%)',
				width: '65px',
				height: '35px',
				color: '#fff',
				border: 'none',
				margin: '0px'
			},
			btn3Style: {
				background:
					'linear-gradient(90deg, rgba(255, 108, 3, 1) 0%, rgba(255, 109, 5, 1) 5.5%, rgba(255, 132, 31, 1) 100%)',
				width: '100px',
				height: '35px',
				color: '#fff',
				border: 'none',
				margin: '0px auto'
			}
		};
	},
	computed: {
		...mapGetters(['merchant']),
		language() {
			return this._i18n.locale;
		}
	},
	onLoad() {
		uni.$on('updateList', () => {
			this.groupChange();
		});
	},
	methods: {
		getState(state) {
			switch (state) {
				case '1':
					return '待到店';
					break;
				case '2':
					return '待点餐';
					break;
				case '3':
					return '待结算';
					break;
				case '6':
					return '已完成';
					break;
			}
		},
		//去结算
		goAccount(item) {
			uni.$u.route({
				url: 'pagesA/my/account',
				params: {
					order_id: item.order_id,
					order_type: 'goods',
					type: 'wechat',
					access_token: item.access_token,
					method: 'scan',
					code: uni.getStorageSync('code')
				}
			});
		},
		//点菜
		orderDishes(item) {
			uni.$u.route({
				type: 'redirect',
				url: 'pagesA/my/orderDishes',
				params: {
					shop_id: this.merchant.id,
					reserve_id: item.reserve.id,
					table_num: item.reserve.num
				}
			});
		},
		//取消预约
		getCancel(item) {
			uni.showLoading({
				title: '取消中...',
				mask: true
			});
			this.$http
				.post('wanlshop/reserve/cancelReserveShop', {
					id: item.reserve.id
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.groupChange();
						setTimeout(() => {
							this.$refs.uToast.show({
								type: 'default',
								duration: 1000,
								message: '取消成功'
							});
						}, 150);
					}
				});
		},
		// 去预约
		goReserve(item) {

			uni.$u.route({
				url: 'pagesA/my/orderDishes',
				params: {
					shop_id: item.shop_id,
					id: item.id,
					type:'diancai'
				}
			});
		},
		//编辑包厢
		editItem(item) {
			this.item = item;
			this.show = true;
		},
		//包厢设置
		getSelect(event) {
			let index = this.editList.findIndex(item => item.name == event.name);
			switch (index) {
				case 0:
					uni.$u.route({
						url: 'pagesA/my/addBox',
						params: {
							type: 'edit',
							id: this.item.id
						}
					});
					break;
				case 1:
					uni.showLoading({
						title: '删除中...',
						mask: true
					});
					this.$http
						.get('wanlshop/shop/delRoom', {
							id: this.item.id
						})
						.then(res => {
							uni.hideLoading();
							if (res.code == 1) {
								this.$refs.paging.reload();
								setTimeout(() => {
									this.$refs.uToast.show({
										type: 'default',
										message: '删除成功',
										duration: 1000
									});
								}, 150);
							}
						});
					break;
			}
		},
		//确认到店
		orderAffirm(item) {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.$http
				.post('wanlshop/reserve/toStore', {
					id: item.reserve.id
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.$refs.paging.reload();
						setTimeout(() => {
							this.$refs.uToast.show({
								type: 'default',
								message: '操作成功',
								duration: 1000
							});
						}, 150);
					}
				});
		},
		//已预定，可预定
		groupChange(event) {
			this.$refs.paging.reload();
		},
		//时间选择
		timeChange(event) {
			this.time = event.detail.value;
			this.$refs.paging.reload();
		},
		//包厢/桌号选择
		boxChange(event) {
			this.is_box = this.boxList[event.detail.value];
			this.$refs.paging.reload();
		},
		//人数
		numChange(event) {
			this.num = this.numList[event.detail.value].nameZn;
			this.$refs.paging.reload();
		},
		queryList(pageNo, pageSize) {
			this.$http
				.post('wanlshop/shop/roomFood', {
					shop_id: this.merchant.id,
					page: pageNo,
					limit: pageSize
				})
				.then(res => {
					res.code == 1
						? this.$refs.paging.complete(res.data.data)
						: this.$refs.paging.complete(false);
				});
		},
		timeChange(event) {
			this.timeShow = false;
			this.time = this.getTime(event.value);
			this.$refs.paging.reload();
		},
		getTime(date) {
			var date = new Date(date);
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			return Y + M + D + h + m;
		}
	}
};
</script>
<style>
page {
	background: #f8f9fd;
}
</style>
<style lang="scss" scoped>
.between {
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.content {
	padding: 20rpx 24rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 20rpx;
	grid-row-gap: 20rpx;

	.grid_item {
		background: #fff;
		border-radius: 20rpx;

		.item_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 20rpx;

			.status_0,
			.status_1 {
				border-radius: 20rpx 0rpx 20rpx 0rpx;
				background: rgba(255, 203, 46, 1);
				padding: 10rpx 20rpx;
				color: #fff;
				font-weight: bold;
				font-size: 28upx;
			}

			.status_0 {
				background: #dbdbdb;
			}
		}

		.item_content {
			padding: 32rpx 20rpx;
			position: relative;

			.status_image {
				width: 38px;
				height: 38px;
				position: absolute;
				right: 10px;
				top: 60px;
			}

			.status1_image {
				width: 38px;
				height: 38px;
				position: absolute;
				right: 20px;
				top: 25px;
			}

			.item_box {
				width: 172rpx;
				height: 112rpx;
				display: block;
				margin: 0 auto 26rpx;
			}

			.item_lobby {
				width: 100rpx;
				height: 100rpx;
				display: block;
				margin: 0 auto 26rpx;
			}

			.item_name {
				display: flex;
				align-items: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				margin-bottom: 26rpx;
				justify-content: center;

				.name_left {
					color: rgba(255, 106, 0, 1);
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 4rpx;
				}

				.name_right {
					color: rgba(59, 59, 59, 1);
					font-size: 28rpx;
				}
			}

			.item_text {
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 240rpx;
				height: 56rpx;
				margin: 0 auto 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0rpx 30rpx;
				box-sizing: border-box;
				background-image: url();
			}
		}
	}
}
</style>
